﻿<template>
  <div class="dress">
    <!-- 装扮商城 -->
    <div class="dress_load" v-if="dressloadShow">
      <van-loading color="#1989fa" size="80" :vertical="true" class="dress_load_load" />
    </div>
    <div class="dress_text" v-else>

      <header_ title="我的背包" :pathName="this.$store.state.pathName" background='#00000000' color='#ffffff' image_='1'
        :Weixin_="Weixin_" size='4.8vw'>

      </header_>
      <div class="dress_info">
        <div class="EntryEffects" v-show="dressTopShow == '1'">
          <div class="EntryEffects_BOX_2">
            <div id="svgaBox2" class="svgabox2" ref="canvas"></div>
          </div>
        </div>
        <div class="myhead" v-if="dressTopShow == '2'">
          <div class="header_img_top">
            <img :src="userInfo.headPic" alt="" />
            <img v-if="header_experience" :src="header_experience" alt="" />
          </div>
        </div>
        <div class="myhead" v-if="dressTopShow == '3'">
          <img class="myhead_3" v-if="header_experience" :src="header_experience" alt="" />
          <div class="myhead_three" v-else>
            <img :src="userInfo.headPic" alt="" />
            <img v-if="header_experience" :src="header_experience" alt="" />
          </div>
        </div>
        <div class="EntryEffects" v-show="dressTopShow == '4'">
          <div class="EntryEffects_BOX">
            <div v-show="PictureFormat=='svga'" id="svgaBox" class="svgabox1" ref="canvas"></div>
            <canvas v-show="PictureFormat == 'pag'" class="canvas" id="pag"></canvas>
          </div>
        </div>
        <div class="top_index" v-if="dressTopShow == '5'">
          <div class="businessCard">
            <img :src="userInfo.headPic" alt="" />
            <div class="nakename">
              <span>{{ userInfo.nickname }}</span>
              <div>
                <img src="../../public/img/dress_new/grilx.png" alt="" /><span>{{ userInfo.age }}</span>
              </div>
            </div>
            <div class="BeautifulNumber" v-if="userInfo.isPerfectNum">
              <img src="../../public/img/dress_new/BeautifulNumber.png" alt="" />
              <div>ID:{{ userInfo.userId }}</div>
            </div>
            <div v-else class="noPerfectNum">ID:{{ userInfo.userId }}</div>
          </div>
        </div>
      </div>

      <div class="dress_list">
        <div class="dress_top">
          <div @click="shops(item.cat_id, index)" v-for="(item, index) in touxiangList.category_list" :key="index">
            <p :class="dressTopShow == item.cat_id ? 'click' : 'unclick'">
              {{ item.cat_name }}
            </p>
            <div v-show="dressTopShow == item.cat_id"></div>
          </div>
        </div>
        <!-- 商品列表 -->
        <ul class="dress_ul">
          <template v-if="touxiangList.goods_list.length > 0">
            <div :class="border == index ? 'border_colocr box_list' : 'box_list'"
              v-for="(item, index) in touxiangList.goods_list" :key="index" @click="index_header(index)">
              <div class="top_header">
                <img :src="item.image" alt="" />
              </div>
              <span @click="showPopup_(item)">{{ newReplace(item.expire)  }}</span>
              <div :class="item.status == '1' ? 'inuse' : 'use_in'" @click="showPopup(item,index)">
                {{ item.status == "1" ? "取消使用" : "使用" }}
              </div>
              <div v-if="border == index" class="poabsolute_">
                <img src="../../public/img/dress_new/xuanzhong.png" alt="" />
              </div>
            </div>
          </template>
          <template v-else>
            <div class="noData">
              <img src="../../public/img/dress_new/kongzhuangtai.png" alt="" />
            </div>
          </template>
        </ul>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" round :style="{ height: '98.6vw' }">
      <div class="model_img_head">
        <div :class="dressTopShow == '4' ? 'header_img svga_img' : 'header_img'">
          <img v-if="dressTopShow == '2'" :src="userInfo.headPic" alt="" />
          <img :src="list_user.image" alt="" />
        </div>
      </div>
      <div class="model_body">
        <div>{{ list_user.goodsName }}</div>
        <div>
          {{ list_user.goodsName }}是声贝专属{{istabber(list_user.cat_id)}}，可通过<span
            v-if="list_user.diamond > 0">购买</span><span v-else>活动</span>获取。
        </div>
        <div>
          剩余使用期限:
          <span v-if="list_user.expire">{{ list_user.expire }}</span>
        </div>
        <!-- <div @click="renew(list_user)">立即续费</div> -->
        <div @click="toactivity_url(list_user.activity_url)">参与活动</div>
      </div>
    </van-popup>
    <van-popup v-model="show2" position="bottom" round :style="{ height: '130vw' }">
      <div class="model_top">
        <img v-if="issvga(item_index.imageFile) == 'svga' || issvga(item_index.imageFile) == 'pag'"
          :src="item_index.image" alt="" :style="item_index.cat_id=='4'?'width:66vw':''" />
        <img v-else :src="item_index.imageFile" alt="" />
        <div class="top_position">
          <span>{{ item_index.day }}天</span>
          <span>|</span>
          <span v-if="item_index.cat_id">{{  istabber(item_index.cat_id) }}</span>
        </div>
      </div>
      <div class="midel_center">
        <div>{{ item_index.goodsName }}</div>
        <div>
          {{ item_index.goodsName }}是声贝专属{{istabber(item_index.cat_id)}}，可通过
          <span v-if="item_index.diamond">购买</span>
          <span v-else>活动</span> 获取。
        </div>
        <div class="ExchangeQquantity">
          <div>兑换数量:</div>
          <div class="calculation">
            <div class="addsbut">
              <div @click="reduce" v-show="item_index.diamond"></div>
              <input type="number" v-model="exchange_num" :disabled="!item_index.diamond>0" />
              <div @click="plus" v-show="item_index.diamond"></div>
            </div>
            <div v-if="item_index.diamond" @click="maximum(item_index.diamond)">最大</div>
            <div v-else class="disable">最大</div>
          </div>
        </div>
        <div class="DaysRemaining">
          <div>剩余使用期限：</div>
          <div>{{item_index.expire}}</div>
        </div>
        <div class="ExchangeQquantity">
          <div>有效期:</div>
          <div class="calculation_">
            <div class="box_dian">
              <img src="../../public/img/dress_new/xuanzhong.png" alt="" />
              <span>{{item_index.day}}天</span>
            </div>
          </div>
        </div>
        <div class="buy_" v-if="item_index.diamond>0">
          <div class="Price">
            <div class="top_price">
              <img src="../../public/img/dress_new/zuanshi.png" alt="" />
              <span>{{item_index.diamond | exchange_num_value(exchange_num)}}</span>
              <div class="discount">
                <span>原价:{{item_index.oldDiamond | exchange_num_value(exchange_num) }}</span>
                <div></div>
              </div>
              <div>{{ ((item_index.diamond/item_index.oldDiamond)*10).toFixed(1) }}折</div>
            </div>
          </div>
          <div @click="renew(item_index)">立即续费</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  import {
    Toast
  } from "vant";
  import "../../assets/js/svga.min.js";
  import header_ from '../../components/header_'
  export default {

    data() {
      return {
        Weixin_: false,
        img_level: "https://xunyinjiaoyou.oss-cn-qingdao.aliyuncs.com/static/level3/",
        img_charm: "https://xunyinjiaoyou.oss-cn-qingdao.aliyuncs.com/static/charm3/",
        show: false,
        show2: false,
        istrue_length: true, //数组长度
        border: "0",
        Approach: "https://xunyinjiaoyou.oss-cn-qingdao.aliyuncs.com/static/images/yutu2.svga", //座驾体验
        header_experience: "", //进场特效体验
        cur: "0",
        bofangShow: false,
        dressTopShow: "2",
        userInfo: {},
        dressloadShow: false,
        touxiangList: {
          goods_list: []
        }, //背包信息
        list_user: {}, //选中model
        item_index: {},
        catId: "",
        path: "", //座驾
        index_image: 0,
        exchange_num: 1, //兑换数量
        formLabelAlign: {}, //好友信息
        cat_name: '',
        pagView: {},
        PictureFormat: 'svga',
      };
      // <meta name="is_hidden_menu" content="1" />  1隐藏2显示
    },
    mounted() {
      const oScript = document.createElement('script');
      oScript.type = 'text/javascript';
      oScript.src = 'https://unpkg.com/libpag@latest/lib/libpag.min.js';
      document.body.appendChild(oScript);
    },
    components: {
      header_
    },
    metaInfo: {
      meta: [{
        name: "is_hidden_menu",
        content: "1"
      }],
    },
    filters: {
      DateDiffer(Date_end) {
        //date1结束时间
        let date1 = new Date(Date_end);
        //date2当前时间
        let date2 = new Date();
        date1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
        date2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
        const diff = date1.getTime() - date2.getTime(); //目标时间减去当前时间
        const diffDate = diff / (24 * 60 * 60 * 1000); //计算当前时间与结束时间之间相差天数
        if (0 < diffDate && diffDate < '2') {
          return '24小时内过期';
        } else {
          return diffDate + '天';
        }
      },
      exchange_num_value(diamond, exchange_num) {
        if (exchange_num == 0) {
          return 0
        } else {
          return exchange_num * diamond
        }
      },
    },
    watch: {
      dressTopShow(newVal, oldVal) {
        if (newVal != oldVal) {
          this.border = "0";
        }
      },
      exchange_num: {
        handler: function () {
          if (this.exchange_num > 999) {
            this.exchange_num = 999;
            return Toast("最多兑换999");
          } else {
            this.exchange_num = Math.floor(Math.abs(this.exchange_num));
          }
        },
        deep: true,
      },
    },
    created() {
      this.get_userid(); //获取用户信息
      this.shops(); //获取商品信息
    },
    mounted() {
      var u = navigator.userAgent;
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      var ua = navigator.userAgent.toLowerCase(); //微信小程序 
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        this.Weixin_ = true
      } else {
        this.Weixin_ = false
        if (isiOS) {
          if (window.webkit) {
            window.webkit.messageHandlers.setStatusBarTheme.postMessage({
              setStatusBarTheme: 1
            });
          }
        } else {
          app.setStatusBarTheme(1)
        }
      }
    },
    methods: {
      newReplace(value) {
        if (value.length > 18) {
          return value.slice(0, 10) + '过期'
        } else {
          return value
        }
      },
      share_() {
        let share = {
          title: "我的背包",
          content: '背包详情',
          describe: '背包详情',
          image: 'http://img.xunyinjiaoyou.com/upload/avatar/202112/29/6558_1640756925.jpg',
          url: 'http://testapi2.xunyinjiaoyou.com/h5/#/myBackpack',
        }
        // this.$.queryParams(share).slice(1)
        console.log(JSON.stringify(share));
        if (window.isiOS) {
          window.webkit.messageHandlers.shareAction.postMessage({
            shareJson: JSON.stringify(share)
          });
        } else {
          app.shareAction(JSON.stringify(share));
        }
      },
      router_go() {
        // console.log(this.$store.state.pathName);
        if (this.$store.state.pathName === "/dress_new") {
          this.$router.push(this.$store.state.pathName);
        } else {
          if (window.isiOS) {
            console.log("isiOS");
            // window.webkit.messageHandlers.pageJumpRecharge.postMessage({});
          } else {
            console.log("安卓");
            // app.pageJumpRecharge();
          }
        }
      },
      istabber(cat_id) {
        let that = this;
        var statusStyle = "";
        if (that.touxiangList.category_list) {
          that.touxiangList.category_list.forEach(item => {
            if (item.cat_id == cat_id) {
              statusStyle = item.cat_name;
            }
          });
          return statusStyle
        }
      },
      maximum(num) {
        this.exchange_num = Math.floor(this.touxiangList.diamond_money / num)
      },
      //边框
      index_header(index) {
        this.border = index;
        if (this.dressTopShow == "4") {
          this.Approach = this.touxiangList.goods_list[index].imageFile;
          this.render();
        } else if (this.dressTopShow == "3") {
          this.header_experience = this.touxiangList.goods_list[index].image;
        } else if (this.dressTopShow == "2") {
          this.header_experience = this.touxiangList.goods_list[index].imageFile;
        } else if (this.dressTopShow == "1") {
          this.palysvgaClick(this.touxiangList.goods_list[index].imageFile);
        }
      },
      //弹窗
      showPopup_(item) {
        if (item.diamond > 0) {
          this.show2 = true;
          this.item_index = item;
        } else {
          this.show = true;
          this.list_user = item;
        }
      },
      issvga(value) {
        if (value) {
          let type = [];
          type = value.split(".").pop();
          if (type == 'svga') {
            return 'svga';
          } else if (type == 'pag') {
            return 'pag';
          } else {
            return 'png';
          }
        }
      },
      //使用或卸载
      showPopup(item, index) {
        let arys = {
          goodId: item.goodsId,
          type: item.status == "0" ? "1" : "2",
        }; //参数
        let url = "/goods/usegood";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            console.log(res);
            this.header_experience = item.imageFile
            this.index_image = index
            this.shops(this.catId);
            Toast(res.data.text);
          }
        });
      },
      //首页背包，切换背包
      shops(catId, index) {
        // console.log(catId, index);
        if (index != undefined) {
          this.dressTopShow = catId;
        }
        this.catId = catId;
        let arys = {
          catId: catId ? catId : '2',
        }; //参数
        let url = "/goods/goodsbag";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            // this.border = '0';
            this.touxiangList = res.data.result;
            this.dressloadShow = false;
            if (this.dressTopShow == "1" && this.touxiangList.goods_list[0]) {
              this.palysvgaClick(this.touxiangList.goods_list[0].imageFile); //进场座驾
            } else if (this.dressTopShow == "2") {
              if (this.touxiangList.goods_list[this.index_image]) {
                this.header_experience = this.touxiangList.goods_list[this.index_image].imageFile;
              }
            } else if (this.dressTopShow == "3") {
              // if(this.touxiangList.goods_list.length == '0'){
              //   this.header_experience = '';
              // }else{
              //    this.header_experience = this.touxiangList.goods_list[0].image;
              // }
            } else if (this.dressTopShow == "4" && this.touxiangList.goods_list[0]) {
              this.Approach = this.touxiangList.goods_list[0].imageFile;
              this.render(); //进场图文
            }

            if (this.touxiangList.goods_list.length == '0') {
              this.header_experience = '';
            }
          }
        });
      },
      //播放座驾
      palysvgaClick(path_) {
        let path = path_;
        let player = new SVGA.Player("#svgaBox2");
        player.loops = 0;
        player.clearsAfterStop = false;
        let parser = new SVGA.Parser("#svgaBox2");
        //注意，这里必须是服务器地址，否则报错
        this.bofangShow = true;
        parser.load(path, function (videoItem) {
          player.setVideoItem(videoItem);
          player.startAnimation();
          player.onFinished(() => {
            // alert('结束')
          });
        });

      },
      reduce() {
        if (this.exchange_num < 2) {
          return Toast("兑换数量不能少于1");
        }
        this.exchange_num--;
      },
      //兑换数量加
      plus() {
        this.exchange_num++;
      },
      async render() {
        let that = this;
        if (this.issvga(this.Approach) == 'svga') {
          that.PictureFormat = 'svga';
          var player = new SVGA.Player("#svgaBox");
          var parser = new SVGA.Parser("#svgaBox");
          parser.load(that.Approach, function (videoItem) {
            player.setImage(that.userInfo.headPic, 'headpic')
            player.setImage(that.img_level + that.userInfo.levelPic + ".png", 'level')
            player.setVideoItem(videoItem);
            player.setText({
              text: `欢迎 ${that.userInfo.nickname} 加入房间`,
              color: "#fff",
              family: "microsoft yahei",
              size: "24px",
            }, 'text');
            player.startAnimation();
          }, function (error) {
            console.log(error);
          })
        } else if (this.issvga(this.Approach) == 'pag') {
          if (this.pagView.rawWidth) {
            this.pagView.stop();
          }
          this.PictureFormat = 'pag';
          const pagUrl = this.Approach;
          const PAG = await window.libpag.PAGInit();
          const buffer = await fetch(pagUrl).then((response) => response.arrayBuffer());
          const afterPagFile = await PAG.PAGFile.load(buffer);
          // 替换文本
          const textDoc = afterPagFile.getTextData(0);
          textDoc.text = `欢迎${this.userInfo.nickname}加入房间`;
          textDoc.fontSize = 36;
          afterPagFile.replaceText(0, textDoc);
          //替换图片
          const image1 = await this.loadImage(that.userInfo.headPic);
          const image2 = await this.loadImage(that.img_charm + that.userInfo.charmPic + ".png");
          const image3 = await this.loadImage(that.img_level + that.userInfo.levelPic + ".png");
          const pagImage1 = PAG.PAGImage.fromSource(image1);
          const pagImage2 = PAG.PAGImage.fromSource(image2);
          const pagImage3 = PAG.PAGImage.fromSource(image3);
          afterPagFile.replaceImage(1, pagImage1);
          afterPagFile.replaceImage(2, pagImage2);
          afterPagFile.replaceImage(3, pagImage3);

          const afterCanvas = document.getElementById('pag');
          afterCanvas.width = 360;
          afterCanvas.height = 96;
          const afterPagView = await PAG.PAGView.init(afterPagFile, afterCanvas);
          afterPagView.setRepeatCount(0);
          await afterPagView.play();
          this.pagView = afterPagView
        }

      },
      loadImage(src) {
        let that = this;
        return new Promise((resolve) => {
          const image = new Image();
          image.onload = () => {
            resolve(image);
          };
          image.onerror = () => {
            resolve(false);
          };
          image.crossOrigin = 'anonymous';
          var index = src.indexOf("?"); //获取其地址
          if (index != -1) {
            image.src = src.substring(0, index);
          } else {
            image.src = src;
          }

        });
      },
      //跳转活动
      toactivity_url(url_) {
        window.open(url_, "_blank");
      },
      // 裁剪圆形图片
      clipImage(src) {
        let size = 124; // 截取宽度可根据svga对应字段得宽度设置
        let canvas = document.createElement("canvas");
        canvas.width = size;
        canvas.height = size;
        let ctx = canvas.getContext("2d");
        ctx.save();
        ctx.beginPath();
        ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2, false); // 截取圆形图
        ctx.clip();
        return this.loadImage(src).then((img) => {
          ctx.drawImage(img, 0, 0, size, size);
          return canvas.toDataURL();
        });
      },
      // promise加载图片
      // loadImage(src) {
      //   return new Promise((resolve, reject) => {
      //     let img = new Image(); // 等价于 document.createElement("img");
      //     img.setAttribute("crossOrigin", "anonymous"); // 设置可以请求跨域图片
      //     img.onload = () => resolve(img); // 事件在图片加载完成后立即执行。
      //     img.onerror = () => reject(new Error("图片加载失败"));
      //     img.src = src;

      //   });
      // },
      get_userid() {
        let arys = {}; //参数
        let url = "/user/userInfo";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.userInfo = res.data.result.user;
            this.dressloadShow = false;
            // console.log(this.userInfo);
          }
        });
      },
      //立即续费
      renew(item) {
        let arys = {
          member_id: window.user_id,
          num: this.exchange_num,
          goodId: item.goodsId,
        }; //参数
        let url = "/goods/buygoods";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.shops(this.catId); //获取商品信息
            this.show2 = false
            Toast(res.data.text);
          }
        });
      },
    },
  };
</script>
<style scoped>
  .title_backpack {
    position: fixed;
    width: 100vw;
    height: 10vw;
    margin-top: 10vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 4.4vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    z-index: 99;
  }

  .title_backpack>div:nth-of-type(1) {
    width: 20vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title_backpack>div:nth-of-type(3) {
    width: 20vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title_backpack img {
    width: 3vw;
    height: 4vw;
    transform: rotate(180deg);
  }

  .model_body>div:nth-of-type(4) {
    font-size: 3.86vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    width: 80vw;
    background: linear-gradient(135deg, #01d5ff 0%, #ca22ff 100%);
    border-radius: 8vw;
    padding: 3vw 0;
    text-align: center;
    letter-spacing: 1px;
    margin: 0 auto;
  }

  .model_body>div:nth-of-type(3) {
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #323233;
    text-align: center;
    padding-top: 5.8vw;
    padding-bottom: 1.5vw;
  }

  .model_body>div:nth-of-type(2)>span {
    color: #ca22ff;
  }

  .model_body>div:nth-of-type(3)>span {
    color: #24b849;
  }

  .model_body>div:nth-of-type(2) {
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #989898;
  }

  .model_body>div:nth-of-type(1) {
    font-size: 4.4vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #111111;
    margin: 4vw 0 2.5vw;
  }

  .model_body {
    width: 90vw;
    margin: 0 auto;
  }

  .header_img>img {
    position: absolute;
  }

  .header_img>img:nth-of-type(1) {
    width: 28vw;
    /* height: 28vw; */
    border-radius: 50%;
  }

  .header_img>img:nth-of-type(2) {
    width: 38vw;
    height: 38vw;
  }

  .header_img {
    width: 43.4vw;
    height: 43.4vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .model_img_head {
    width: 100vw;
    height: 48vw;
    background: linear-gradient(360deg, #eceffe 0%, #a0afeb 100%);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .noData>img {
    width: 44vw;
    height: 44vw;
  }

  .noData {
    width: 100vw;
    height: 44vw;
    margin-top: 18%;
    display: flex;
    justify-content: center;
    align-content: center;
  }

  .poabsolute_>img {
    width: 100%;
    height: 100%;
  }

  .poabsolute_ {
    position: absolute;
    top: 1.2vw;
    right: 1.2vw;
    width: 5.3vw;
    height: 5.3vw;
  }

  .use_in {
    font-size: 2.66vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    background: linear-gradient(135deg, #01d5ff 0%, #ca22ff 100%);
    border-radius: 3.5vw;
    padding: 1vw 2vw;
  }

  .inuse {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ca22ff;
    font-size: 2.66vw;
  }

  .box_list>span {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    font-size: 3.3vw;
    padding: 1vw 0;
  }

  .top_header {
    width: 24vw;
    height: 24vw;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
  }

  .top_header>img {
    position: absolute;
  }

  .top_header>img:nth-of-type(1) {
    width: 70%;
    /* height: 70%; */
    /* border-radius: 50%; */
    z-index: 99;
  }

  .top_header>img:nth-of-type(2) {
    width: 100%;
    height: 100%;
    z-index: 9999;
  }

  .dress_ul .border_colocr {
    border: 1px solid #ca22ff;
  }

  .svgabox2 {
    width: 100%;
    height: 100%;
  }

  .EntryEffects_BOX_2 {
    width: 100vw;
    height: 100%;
  }

  .EntryEffects_BOX {
    width: 100vw;
    height: 25.2vw;
  }

  .EntryEffects {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100%;
    overflow-x: hidden;
  }

  .noPerfectNum {
    color: #000000;
    font-size: 3vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
  }

  .BeautifulNumber>div {
    background: linear-gradient(135deg, #f9e7a8 0%, #fffbeb 0%, #f6d16c 100%);
    border-radius: 0px 1vw 1vw 0px;
    padding: 0.4vw 1.5vw;
    font-size: 2.9vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #715a2f;
  }

  .BeautifulNumber>img {
    width: 4.8vw;
    height: 4.8vw;
  }

  .BeautifulNumber {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nakename>div span {
    font-size: 2.9vw;
    font-family: ArialMT;
    color: #ffffff;
  }

  .nakename>div img {
    width: 3.14vw;
    height: 3.14vw;
    padding-right: 2px;
  }

  .nakename>div {
    width: 8.7vw;
    height: 3.86vw;
    border-radius: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fc4893;
  }

  .nakename>span {
    font-size: 3.86vw;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    padding-right: 2vw;
  }

  .nakename {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3vw 1vw;
  }

  .businessCard>img:nth-of-type(1) {
    width: 16.4vw;
    height: 16.4vw;
    border-radius: 50%;
    margin-top: -8vw;
  }

  .businessCard {
    width: 65vw;
    height: 31vw;
    background: linear-gradient(180deg, #c9e1ff 0%, #ffffff 100%);
    border-radius: 2.5vw;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .dress {
    width: 100vw;
    height: 100vh;
    overflow: auto;
  }

  .dress_load {
    width: 100vw;
    height: 100vh;
    position: relative;
  }

  .dress_load_load {
    margin-top: 40vh;
  }

  .dress_text {
    width: 100vw;
    /* height: 100vh; */
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .dress_info {
    width: 100vw;
    height: 78vw;
    background: linear-gradient(135deg, #192134 0%, #192134 100%);
    text-align: center;
    position: relative;
    z-index: 0;
  }

  .myhead {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .top_index {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* .myhead>img:nth-of-type(1) {
    position: absolute;
    width: 26.6vw;
    height: 26.6vw;
    border-radius: 50%;
  }
  .myhead>img:nth-of-type(2) {
    position: absolute;
    width: 36.6vw;
    height: 36.6vw;
    border-radius: 50%;
  } */
  .myhead .myhead_3 {
    width: 26.6vw;
    height: 26.6vw;
    position: relative;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }

  .myhead_three {
    width: 26.6vw;
    height: 26.6vw;
    position: relative;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }

  .myhead .myhead_three>img:nth-of-type(1) {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .myhead .myhead_three>img:nth-of-type(2) {
    position: absolute;
    width: 140%;
    height: 140%;
    border-radius: 50%;
  }

  .myhead .header_img_top {
    width: 26.6vw;
    height: 26.6vw;
    position: relative;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }

  .myhead .header_img_top>img:nth-of-type(1) {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .myhead .header_img_top>img:nth-of-type(2) {
    position: absolute;
    width: 140%;
    height: 140%;
    border-radius: 50%;
  }

  .dress_list {
    width: 100vw;
    background: white;
    border-radius: 4vw 4vw 0 0;
    /* position: absolute;
    top: 64.9vw; */
    margin-top: -14vw;
    z-index: 10;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .dress_top {
    width: 89.3vw;
    margin: 0 auto;
    height: 16.2vw;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap
  }

  .dress_top>div {
    height: 11.2vw;
    /* width: 41.3vw; */
    float: left;
    position: relative;
    text-align: center;
    line-height: 15vw;
    font-size: 3.5vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    white-space: nowrap
  }

  .click {
    font-size: 4.4vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #000000;
  }

  .unclick {
    padding: 0 2vw;
    height: 100%;
    color: #666666;
  }

  .dress_top>div>div {
    position: absolute;
    bottom: 0;
    width: 4.3vw;
    height: 1vw;
    left: 50%;
    margin-left: -2.15vw;
    background: #ca22ff;
    border-radius: 0.25vw;
  }

  .dress_ul {
    width: 96vw;
    margin: 0 auto;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    margin-top: 5.3vw;
    position: relative;
  }

  .box_list {
    width: 28vw;
    height: 40.1vw;
    background: #ffffff;
    box-shadow: 0px 3px 2vw 0px rgba(4, 39, 66, 0.1);
    border-radius: 1.5vw;
    border: 1px solid #fff;
    margin-right: 2.5vw;
    margin-bottom: 2.8vw;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .dress_bofang {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100vh;
  }

  .svgabox1 {
    width: 100vw;
    height: 25vw;
  }

  .svga_img {
    width: 60vw;
    height: 100%;
    position: relative;
  }

  .svga_img>img {
    width: 100% !important;
    border-radius: 0% !important;
  }

  .model_top>div:nth-of-type(2)>img {
    width: 100%;
    height: 100%;
  }

  .model_top>div:nth-of-type(2) {
    position: absolute;
    width: 16vw;
    height: 16vw;
  }

  .model_top>div:nth-of-type(1) {
    position: absolute;
    right: 0;
    top: 0vw;
    background: rgba(127, 146, 225, 0.7);
    border-radius: 0px 0px 0px 3.86vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3.86vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #fff;
    padding: 1.5vw 2vw;
  }

  .model_top>img {
    width: 31.6vw;
    /* height: 31.6vw; */
  }

  .model_top {
    width: 100vw;
    height: 48vw;
    background: linear-gradient(360deg, #eceffe 0%, #a0afeb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .midel_center>div:nth-of-type(1) {
    width: 100%;
    height: 8vw;
    display: flex;
    align-items: center;
    font-size: 4.3vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #111111;
    margin-top: 4vw;
  }

  .midel_center>div:nth-of-type(2) {
    width: 100%;
    height: 8vw;
    display: flex;
    align-items: center;
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #989898;
    margin: 1.5vw 0;
  }

  .midel_center {
    width: 92vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }

  .midel_center>div:nth-of-type(2)>span {
    color: #ca22ff;
  }

  .ExchangeQquantity>#calculation_2 {
    width: 40vw;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .ExchangeQquantity>div:nth-of-type(2) {
    display: flex;
    width: 41vw;
    height: 100%;
    justify-content: flex-end;
    align-items: center;
  }

  .ExchangeQquantity>div:nth-of-type(1) {
    font-size: 4.3vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
  }

  .ExchangeQquantity {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 10vw;
    margin: 1.5vw 0;
  }

  .calculation>div:nth-of-type(2) {
    width: 13.5vw;
    height: 7.2vw;
    border-radius: 3.6vw;
    background: linear-gradient(135deg, #01d5ff 0%, #ca22ff 100%);
    text-align: center;
    line-height: 7.2vw;
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }

  .calculation>div:nth-of-type(1) {
    width: 25vw;
    height: 7.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../../public/img/dress_new/xuanzeqi.png") no-repeat;
    background-size: contain;
  }

  .addsbut>div:nth-of-type(1) {
    width: 7.2vw;
    height: 7.2vw;
  }

  .addsbut>div:nth-of-type(2) {
    width: 7.2vw;
    height: 7.2vw;
  }

  .addsbut>input {
    width: 10.5vw;
    height: 7.2vw;
    border: 0;
    text-align: center;
  }

  .disable {
    background: #B4B4B4 !important;
  }

  .calculation_>div {
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .calculation_ {
    width: 42vw;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .box_dian>span {
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #323233;
    line-height: 7.2vw;
  }

  .box_dian>img {
    width: 4.3vw;
    height: 4.3vw;
  }

  #calculation_2>img {
    width: 2.5vw;
    height: 4.2vw;
  }

  .ExchangeQquantity>#calculation_2 {
    width: 40vw;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .friend_name>div {
    color: #323233;
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #323233;
    padding-left: 1vw;
    padding-right: 2vw;
    width: 20vw;
    text-align: left;
    white-space: nowrap;
    /*强制在一行显示*/
    text-overflow: ellipsis;
    /*设置超出内容显示...*/
    overflow: hidden;
    /*一定不能少 超出的内容进行隐藏*/
  }

  .friend_name>img {
    border-radius: 50%;
    width: 5.8vw;
    height: 5.8vw;
  }

  .friend_name {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .buy_>div:nth-of-type(2) {
    width: 28.8vw;
    height: 10.6vw;
    background: linear-gradient(135deg, #01d5ff 0%, #ca22ff 100%);
    border-radius: 5.3vw;
    text-align: center;
    line-height: 10.6vw;
    font-size: 3.8vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #ffffff;
  }

  .buy_ {
    width: 100%;
    height: 10.6vw;
    display: flex;
    justify-content: space-between;
    margin-top: 2.8vw;
  }

  .Price>div:nth-of-type(2) {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #989898;
    font-size: 3.4vw;
  }

  .Price {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .top_price>div:nth-of-type(2) {
    font-size: 2.66vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    padding: 1vw 2vw;
    background: #ca22ff;
    border-radius: 1vw;
    margin-left: 1vw;
  }

  .top_price>span {
    font-size: 4.8vw;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    padding-left: 1vw;
  }

  .top_price>img {
    height: 3.4vw;
    width: 4.3vw;
  }

  .top_price {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .discount>div {
    position: absolute;
    width: 94%;
    height: 1px;
    top: 2vw;
    background: #000;
  }

  .right_box img {
    width: 10vw;
    height: 100%;
  }

  .discount>span {
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  .discount {
    position: relative;
    display: flex;
    padding-left: 1vw;
  }

  .top_position>span:nth-of-type(2) {
    padding: 0 1vw;
  }

  .DaysRemaining {
    padding: 2vw 0;
    display: flex;
  }

  .DaysRemaining>div:nth-of-type(1) {
    font-size: 4.3vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
  }

  .DaysRemaining>div:nth-of-type(2) {
    font-size: 4.3vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #24B849;
  }
</style>